<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>7.Vue.extend的简写形式</title>
		<style>
			.person{
				background-color: skyblue;
			}
			.school{
				background-color: orange;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			// 定义一个Person组件
			let Person = {
				name:'Person',
				template:`
					<div class="person">
						<h1>人员信息</h1>	
						<h4>姓名：{{name}}</h4>
						<h4>年龄：{{age}}</h4>
						<button @click="showInfo">提示信息</button>
					</div>
				`,
				data() {
					return {
						name:'强哥',
						age:18
					}
				},
				methods: {
					showInfo(){
						console.log(this)
						alert(this.name + '-' + this.age)
					}
				}
			}

			// 定义一个School组件
			let School = {
				name:'School',
				template:`
					<div class="school">
						<h1>学校信息</h1>	
						<h4>校名：{{name}}</h4>
						<h4>地址：{{address}}</h4>
						<button @click="showInfo">提示信息</button>
					</div>
				`,
				data() {
					return {
						name:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods: {
					showInfo(){
						alert(this.name + '-' + this.address)
					}
				}
			}

			let App = {
				name:'App',
				components:{Person,School},
				template:`
					<div>
						<Person></Person>
						<hr>
						<School></School>
					</div>
				`,
				data() {
					return {
						str:'今天天气好炎热！'
					}
				},
			}
			
			new Vue({
				el:'#demo',
				data() {
					return {
						msg:'欢迎学习前端'
					}
				},
				components:{App},
				template:`<App/>`
			})
		</script>
	</body>
</html>